<template>
    <div id="app">
    <h1>
      state：
      {{ $store.state.n }}
      --
      {{ cn }}
      --
      {{ n }}
      --
      {{ nn }}
    </h1>
    <h2>getters： {{ $store.getters.money }}</h2>
    
    <button @click="$store.commit('jiajia',1)">+1</button>
    <button @click="fn1">+1</button>
    <button @click="jiajia(1)">+1</button>
    <button @click="jj(3)">+3</button>
    <button @click="jjj(3)">+3</button>


  <br>

    <button @click="$store.dispatch('jia')">3秒后+1</button>

  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'

export default {
  computed:{
   cn(){
    return this.$store.state.n;
   },
   ...mapState(["n"]),
   ...mapState({
    nn:(state)=>state.n
   })
  },
  methods:{
    fn1(){
      this.$store.commit("jiajia",1)
    },
    ...mapMutations(["jiajia"]),
    ...mapMutations({
      "jj":(commit,n)=>commit("jiajia",n)
    }),
    ...mapMutations({
      "jjj":"jiajia"
    })
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
